<template>
  <div class="userbox" >
    <div class="avatar">
      <img
        :src="
          user.headerurl
            ? (baseApi + user.headerurl)
            : baseApi + 'UserHeader\\20230214105739655.jpg'
        "
        alt=""
      />
    </div>
    <div class="name">{{ user.UserName }}</div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeUser } from "@/store/user";
import { storeToRefs } from "pinia";
export default {
  name: "",
  components: {},
  setup(props, ctx) {
    const user = storeUser();
    const router = useRouter();
    const toPerson = () => {
      router.push("/manage");
    };
    return {
      user,
      toPerson,
    };
  },
};
</script>

<style scoped lang="scss">
.userbox {
  height: 100%;
  // width: 150px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .avatar {
    width: 50px;
    height: 50px;
    margin-right: 16px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .name {
    font-size: 20px;
    flex: 1;
  }
}
</style>
